<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import * as Lodash from 'lodash';
  import SubTitle from '@/components/sub-title/index.vue';
  import ImgData from '@/components/img-data/index.vue';
  import TextData from '@/components/text-data/index.vue';
  import ScrollTable from '@/views/big-screen/scroll-table.vue';
  import useECharts from '@/hooks/useECharts';
  import { updateOptions, updateAxisData } from '@/utils/echarts_util';
  import { dataOverview } from './data';
  import {
    ChartGenderOptions,
    ChartLiveOptions,
    ChartAgeOptions,
    ChartDisabilityOptions,
  } from './options';

  const dataBase = ref(Lodash.cloneDeep(dataOverview.overview));
  const dataStation = ref(Lodash.cloneDeep(dataOverview.station));
  const staffColumns = ref([
    {
      title: '服务人员',
      dataIndex: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '性别',
      dataIndex: 'gender',
    },
    {
      title: '站点',
      dataIndex: 'site',
    },
    {
      title: '等级',
      dataIndex: 'level',
    },
  ]);
  const alarmColumns = ref([
    {
      title: '设备名称',
      dataIndex: 'deviceName',
    },
    {
      title: '长者姓名',
      dataIndex: 'elderName',
    },
    {
      title: '报警时间',
      dataIndex: 'alarmDatetime',
    },
  ]);
  const dataGender = ref(Lodash.cloneDeep(dataOverview.elders.gender));
  const dataLive = ref(Lodash.cloneDeep(dataOverview.elders.live));
  const dataAge = ref(Lodash.cloneDeep(dataOverview.elders.age));
  const dataDisability = ref(Lodash.cloneDeep(dataOverview.elders.disability));
  const dataService = ref(Lodash.cloneDeep(dataOverview.efficiency));
  const dateAlarms = ref(Lodash.cloneDeep(dataOverview.alarms));

  const chartGender = ref();
  const chartLive = ref();
  const chartAge = ref();
  const chartDisability = ref();
  const { setOptions: setChartGenderOptions } = useECharts(chartGender);
  const { setOptions: setChartLiveOptions } = useECharts(chartLive);
  const { setOptions: setChartAgeOptions } = useECharts(chartAge);
  const { setOptions: setChartDisabilityOptions } = useECharts(chartDisability);

  const renderLive = () => {
    const chartLiveOptions = Lodash.cloneDeep(ChartLiveOptions);
    const graphic = chartLiveOptions.graphic as any;
    if (Lodash.isArray(graphic)) {
      graphic[0].style.text = `${dataLive.value[0].name}`;
      graphic[1].style.text = `${dataLive.value[0].value}`;
    }
    setChartLiveOptions(
      updateOptions(chartLiveOptions, [Lodash.tail(dataLive.value)])
    );
  };

  const renderAge = () => {
    const male: number[] = [];
    const female: number[] = [];
    for (let i = 0; i < dataAge.value.length; i += 1) {
      const item = dataAge.value[i];
      male.push(item.male);
      female.push(item.female);
    }
    setChartAgeOptions(
      updateOptions(updateAxisData(ChartAgeOptions, dataAge.value, 'xAxis'), [
        male,
        female,
      ])
    );
  };

  const renderDisability = () => {
    const male: number[] = [];
    const female: number[] = [];
    for (let i = 0; i < dataDisability.value.length; i += 1) {
      const item = dataDisability.value[i];
      male.push(item.male);
      female.push(item.female);
    }
    setChartDisabilityOptions(
      updateOptions(
        updateAxisData(ChartDisabilityOptions, dataDisability.value, 'xAxis'),
        [male, female]
      )
    );
  };

  onMounted(() => {
    // 长者性别
    setChartGenderOptions(
      updateOptions(ChartGenderOptions, [dataGender.value])
    );
    // 居住情况
    renderLive();
    // 年龄分布
    renderAge();
    //
    renderDisability();
  });
</script>

<template>
  <div class="vls-overview flex">
    <div class="vls-ov-item vls-ov-left w-[30%] border-light">
      <SubTitle title="长者概况" />
      <div style="margin-top: 1vh" class="vls-ov1-gender-live flex">
        <div class="vls-ov1-gender w-[38%]">
          <div class="title color-light">长者性别</div>
          <div class="vls-chart-gender">
            <div ref="chartGender" class="w-full h-[20vh]"></div>
          </div>
        </div>
        <div class="vls-ov1-live w-[58%]">
          <div class="title color-light">居住情况</div>
          <div class="vls-chart-live">
            <div ref="chartLive" class="w-full h-[20vh]"></div>
          </div>
        </div>
      </div>
      <div style="margin-top: 2vh" class="vls-ov1-age w-full">
        <div class="title color-light">年龄分布</div>
        <div class="vls-chart-age">
          <div ref="chartAge" class="w-full h-[25vh]"></div>
        </div>
      </div>
      <div style="margin-top: 3vh" class="vls-ov1-disability w-full">
        <div class="title color-light">失能等级分布</div>
        <div class="vls-chart-disability">
          <div ref="chartDisability" class="w-full h-[25vh]"></div>
        </div>
      </div>
    </div>
    <div class="vls-ov-item vls-ov-center flex-col">
      <div class="vls-ov2-summary flex">
        <!-- <div
          class="vls-ov2-item flex flex-col"
        >
          <div class="value">{{ item.value }}</div>
          <div class="name">{{ item.name }}</div>
          
        </div> -->
        <ImgData
          v-for="(item, i) of dataBase"
          :key="'ov2-' + i"
          style="width: 160px"
          :name="item.name"
          :value="item.value"
        />
      </div>
      <div class="vls-ov2-hotmap">
        <div class="vls-ov2-hotmap-title">老人分布热力图</div>
        <div class="vls-ov2-hotmap-elems flex">
          <div class="vls-ov2-hotmap-icons"></div>
          <div class="vls-ov2-hotmap-map">
            <img src="@/assets/images/map.png" alt="" />
          </div>
        </div>
      </div>
      <div class="vls-ov2-site flex">
        <div class="vls-ov2-site-info flex flex-col">
          <TextData
            style="width: 130px"
            bg="bg1"
            value-color="#c280ff"
            name="服务站数量"
            :value="dataStation.count"
          />
          <TextData
            style="width: 130px"
            bg="bg1"
            value-color="#c280ff"
            name="服务人员数量"
            :value="dataStation.staffCount"
          />
        </div>
        <div class="vls-ov2-site-staff">
          <ScrollTable
            size="small"
            :columns="staffColumns"
            :data="dataStation.staffs"
            :height="160"
          />
        </div>
      </div>
    </div>
    <div class="vls-ov-item vls-ov-right flex-col w-[30%] border-light">
      <div class="vls-ov3">
        <SubTitle title="养老服务效能" />
        <div class="vls-ov3-service flex">
          <ImgData
            class="w-[48%]"
            bg="bg2"
            name="累计服务项目次数"
            name-color="#FFF"
            value-color="#00F9FF"
            :value="dataService.totalServiceItem"
          />
          <ImgData
            class="w-[48%]"
            bg="bg2"
            name="人均被服务项目数"
            name-color="#FFF"
            value-color="#00F9FF"
            :value="dataService.perServiceItem"
          />
        </div>
      </div>
      <div class="vls-ov3">
        <SubTitle title="智能设备效能" />
        <div class="vls-ov3-device vls-ov3-service flex">
          <TextData
            style="width: 170px"
            bg="bg2"
            name="设备安装累计数量"
            :value="dataService.totalDeviceInstall"
          />
          <TextData
            style="width: 170px"
            bg="bg2"
            name="正常工作率"
            :value="dataService.deviceAccuracy"
          />
        </div>
      </div>
      <div class="vls-ov3">
        <SubTitle title="报警工单效能" />
        <div class="vls-ov3-alarm vls-ov3-service flex">
          <TextData
            style="width: 170px"
            :reverse="true"
            name="累计报警工单数量"
            :value="dataService.totalAlarmOrder"
          />
          <TextData
            style="width: 160px"
            value-color="#FFFF00"
            :reverse="true"
            name="报警工单处理率"
            :value="dataService.alarmOderProcess"
          />
        </div>
      </div>
      <div class="vls-ov3-alarm-live">
        <div class="title color-light">设备报警实时数据（今日未处理）</div>
        <div class="vls-alarm">
          <ScrollTable
            size="small"
            :columns="alarmColumns"
            :data="dateAlarms"
            :height="150"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .vls-overview {
    column-gap: 30px;

    .vls-ov-item {
    }

    .vls-ov-left {
      .vls-ov1-gender-live {
        margin-top: 1vh;
        column-gap: 4%;
        // place-items: center;
      }
    }

    .vls-ov-center {
      flex: 1;

      .vls-ov2-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        // grid-gap: 10px;
        place-items: center;
        row-gap: 2vh;

        .vls-ov2-item {
          text-align: center;
          width: 160px;
          padding-top: 20px;
          background-image: url('@/assets/images/common/data_bg1.png');
          background-size: 100% 100%;
          background-position: center center;
          background-repeat: no-repeat;

          .value {
            color: #c280ff;
            font-size: 20px;
            font-weight: bold;
          }

          .name {
            color: #aaaaaa;
            position: relative;
            bottom: -24px;
          }
        }
      }

      .vls-ov2-hotmap {
        margin-top: 5vh;
        height: 40vh;
        background-image: url('@/assets/images/map_box.png');
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;

        .vls-ov2-hotmap-title {
          // padding: 20px 20px;
          position: absolute;
          left: 8%;
          top: 10.6%;
        }

        .vls-ov2-hotmap-elems {
          justify-content: space-between;
          padding: 30px;
          padding-bottom: 0;
          padding-right: 5vw;

          .vls-ov2-hotmap-map {
            // width: 350px;
            height: 36vh;

            img {
              height: 100%;
              width: 100%;
            }
          }
        }
      }

      .vls-ov2-site {
        margin-top: 3vh;
        column-gap: 10px;
        flex: 1;

        .vls-ov2-site-info {
          row-gap: 20px;
        }

        .vls-ov2-site-staff {
          padding-right: 10px;
        }
      }
    }

    .vls-ov-right {
      justify-content: space-between;

      .vls-ov3 {
        .vls-ov3-service {
          padding: 20px 20px 40px 20px;
          padding-top: 3vh;
          padding-bottom: 4.5vh;
          justify-content: space-around;
        }

        .vls-ov3-device {
          padding-bottom: 2vh;
        }

        .vls-ov3-alarm {
          padding-left: 12%;
          padding-right: 12%;
          background-image: url('@/assets/images/common/data_box1.png');
          background-size: 90% 80%;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }

      .vls-ov3-alarm-live {
        .vls-alarm {
          padding-top: 1vh;
        }
      }
    }
  }
</style>
